<script setup lang="ts">
  const props = defineProps({
    bg: {
      type: String,
      default: 'bg0',
    },
    name: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number],
      default: '',
    },
    nameColor: {
      type: String,
      // #FFFFFF, #aaaaaa
      default: '#FFFFFF',
    },
    valueColor: {
      type: String,
      // #00F9FF, #c280ff
      default: '#00F9FF',
    },
    reverse: {
      type: Boolean,
      default: false,
    },
    nameFontSize: {
      type: String,
      default: '15px',
    },
    valueFontSize: {
      type: String,
      default: '20px',
    },
  });
</script>

<template>
  <div
    class="text-data flex flex-col"
    :class="{
      bg1: props.bg === 'bg1',
      bg2: props.bg === 'bg2',
      bg3: props.bg === 'bg3',
      bg4: props.bg === 'bg4',
    }"
  >
    <div
      v-if="!props.reverse"
      class="name"
      :style="`color: ${props.nameColor};font-size: ${props.nameFontSize};`"
    >
      {{ props.name }}
    </div>
    <div
      class="value"
      :style="`color: ${props.valueColor};font-size: ${props.valueFontSize};`"
    >
      <slot name="icon"></slot>
      {{ props.value }}
    </div>
    <div
      v-if="props.reverse"
      class="name"
      :style="`color: ${props.nameColor};font-size: ${props.nameFontSize};`"
    >
      {{ props.name }}
    </div>
  </div>
</template>

<style lang="less" scoped>
  .bg1 {
    background-image: url('@/assets/images/common/data_box1.png');
  }
  .bg2 {
    background-image: url('@/assets/images/common/data_box2.png');
  }
  .bg3 {
    background-image: url('@/assets/images/common/data_box3.png');
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    .value {
      font-size: 22px !important;
    }
    // padding: ;
  }
  .text-data {
    text-align: center;
    width: 100%;
    // padding-top: 20px;
    padding: 15px 20px 10px 20px;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;

    .value {
      font-size: 20px;
      font-weight: bold;
      margin: 5px 0;
    }

    .name {
      // position: relative;
      // bottom: -28px;
    }
  }
</style>
